<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="com.teach.entity.Shops"%>
<%@page import="java.util.List"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时尚外卖</title>
		<c:set var="title" value="首页" scope="request" />
		<jsp:include page="/head.jsp" />
	</head>
	
	<link rel="stylesheet" type="text/css" href="../food/css/style.css" />
	<link rel="shortcut icon" href="./img/meituan.ico" />
	<link rel="stylesheet" type="text/css" href="..food/css/food-iconfont.css">
	<script src="js/jquery-3.2.1.min.js"></script>
	<!-- <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> -->
	<script type="text/javascript">
		//		轮播图切换
		window.onload = function() {
			var lunbt = document.getElementsByClassName('lunbt')[0];
			var p = 1;
			var timer;

			function lbt() {
				timer = setInterval(function() {
					lunbt.setAttribute('src', 'img/ms' + p + '.jpg');
					p++;
					if(p == 4) {
						p = 1;
					}
				}, 2000);
			}
			lbt();
			//		轮播图切换结束

			//轮播图按钮切换
			var btn = document.getElementsByClassName("btn"); //切换小横条变换
			var lbt_box = document.getElementsByClassName("lbt_box");
			var btn_pre = document.getElementsByClassName("btn-pre");
			var btn_next = document.getElementsByClassName("btn-next");
			lbt_box[0].onmouseenter = function() {
				btn_pre[0].style.display = 'block';
				btn_next[0].style.display = 'block';
				clearInterval(timer);
			};
			lbt_box[0].onmouseleave = function() {
				btn_pre[0].style.display = 'none';
				btn_next[0].style.display = 'none';
				lbt();
			}
			btn_next[0].onclick = function() {
				clearInterval(timer);
				p++;
				lunbt.setAttribute('src', 'img/ms' + p + '.jpg');
				if(p == 4) {
					p = 1;
				}
			}
			//         轮播图按钮切换结束


		}
	</script>

	<body>
		
		<c:import url="/header.do" />
		<div id="meituanwang">
			<!--头部内容开始-->
			 <div id="header" style="box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.1);">
			
				<div class="container" style="height:1000px">
					<!-- <div class="city">
						<i></i>
						<span>长沙</span>
						<span class="qhcs">切换城市</span>[
						<a href="" class="active">湘潭</a>
						<a href="" class="active">宁乡</a>
						<a href="user.html" class="active">株洲</a>]
					</div> -->
					<div class="login1" style="position: relative;top:15px">
						<a href="${sessionScope.user.userName==null?"./login.html":""}">${sessionScope.user.userName==null?"立即登录":sessionScope.user.userRealName}</a>
						<a href="./registe.html" class="loginIn">${sessionScope.user.userRealName==null?"注册":""}</a>
					</div>
					<div class="link" style="position: relative;top:-10px">
						<%-- <li class="nav">
							<a href="">时尚外卖</a>
							<ul class="link-second mine">
								<li>
									<a href="food-order.do?foodName=${sessionScope.user.userName==null?"./login.html":sessionScope.user.userName}">个人中心</a>
								</li>
								<li>
									<a href="food/food-list.jsp">个人中心</a>
								</li>
							</ul>
						</li> --%>
						<!-- <li>
							<a href="">手机APP</a>
						</li> -->
						<!-- <li class="nav">
							<a href="">商家中心</a>
							<ul class="link-second merchant">
								<li>
									<a href="#">登录商家中心</a>
								</li>
								
							</ul>
						</li> -->
						<!-- <li class="nav">
							<a href="">网站导航</a>
							<ul class="link-second wangzhan clearfix">

							</ul>
						</li> -->
					</div>
				</div>

			</div>
			<!--头部结束-->

			<!--搜索栏开始-->
			<div id="search" style="box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);">
				<div class="container">
					<div class="search_con">
						<div class="logo">
							<a href=""><img src="img/logo4.png" /></a>
						</div>
					
						<div class="search_input" >
						<!-- style="position: relative;left:290px;top:-70px" -->
						
							<form action="food-search.do" method="get">
								
								<input type="search" name="input_search" placeholder="搜索商家或地点" />
								
								<button type="submit" class="btn btn-default">查询</button>
								  
								
							</form>
						
						</div>
					
						<div class="search_right">
							<ul>
								<li>
									<i></i>
									<a href="">随时退</a>
								</li>
								<li>
									<i></i>
									<a href="">不满意免单</a>
								</li>
								<li>
									<i></i>
									<a href="">过期退</a>
								</li>
								<span class="tupian">
		         </span>
							</ul>
						</div>

						<!--<p>
							<a href="./waimai.html" class="waimai">shish外卖</a>
							<a href="./maoyan.html" class="film">猫眼电影</a>
							<a href="hotel.html" class='hotel'>美团酒店</a>
							<a href="./merchant.html" target="_blank" class="merchant">商家入驻</a>
						</p>-->
					</div>
				</div>

			</div>
			<!--搜索栏结束-->
			<div class="con">
				<!--菜单部分开始-->
				<div class="menu">
					<div class="container">
						<!--内容左侧导航条开始-->
						<div class="con_left gradient clear">
							<p>
								<a href="" class="allKind">全部分类</a>
							</p>
							<c:forEach items="${list2 }"  var="foods">
							<ul>
								<li>
									<div class="">
										<a href="shangjia.do?shopId=${foods.id}">${foods.shopName}</a>
										<i></i>
									</div>
									
								</li>
								<!-- <li>
									<div class="">
										<a href="#">外卖</a>
										<i></i>
									</div>
									
								</li>
								<li>
									<div class="">
										<a href="#">烧烤</a>
										<i></i>
									</div>
									
								</li> -->
							</ul>
							</c:forEach>
						</div>
						<!--内容左侧导航条结束-->

						<!--内容中部轮播图开始-->
						<div class="con_middle" style="width:900px;position: relative;left: 20px">
						<%Boolean flag = true; %>
			    	<c:forEach items="${list3}" var="shop" >
			    		<%if(flag){ %>
				        	<div class="item active">
				        <%
				        flag = false;
			    		}else{ %>
				        	
				        <%} %>
							<a href="shangjia.do?shopId=${shop.id}" class="lbt_box" ><img src="img/ms1.jpg" class='lunbt'>
								<div class="slider_btn" >
									<div class="btn" style="opacity: 0.9;">
									</div>
									<div class="btn" style="opacity: 0.2;">
									</div>
									<div class="btn" style="opacity: 0.2;">
									</div>
									<!-- <div class="btn" style="opacity: 0.2;">
									</div>
									<div class="btn" style="opacity: 0.2;">
									</div> -->
								</div>
								<div class="btn-pre" style="display: none;">
									<div class="fork">
									</div>
								</div>
								<div class="btn-next" style="display: none;">
									<div class="fork">
									</div>
								</div>
							</a>
							
							</c:forEach>
							</div>
							
						<!-- 	<a href=""><img src="img/middle_3.png" /></a>
							<a href=""><img src="img/middle_4.png" /></a>
							<a href=""><img src="img/middle_5.png" /></a>
 -->
						</div>
						<!--内容中部轮播图结束-->
						<!--内容右边注册部分开始-->
						<%-- <div class="con_right">
							<div class="user" >
								<img src="img/user.png" style="transform: scale(0.1);"/>
								<p>Hi!你好</p>
								<a href="${sessionScope.user.userRealName==null?'./registe.jsp':'logout.do'}" class="zhuce">${sessionScope.user.userRealName==null?"注册":"注销"}</a>
								<a href="${sessionScope.user.userRealName==null?'./login.html':""}" class="zhuce">${sessionScope.user.userRealName==null?"登陆":sessionScope.user.userRealName}</a>
							</div>
							
						</div> --%>
						<!--内容右边注册部分结束-->
					</div>
				</div>
				<!--菜单部分栏结束-->
				<div class="gediao" style="height:1500px">
					<div class="container">
						<ul class="con_title">
						<li class="title">商家入口</li>
						<div class="title_item">
							
						</div>
					</ul>
					
						<div class="gediaocons">
							<div class="part_con clearfix gediao-con" style="display: block;">
							<!-- 商家 -->
							<c:forEach items="${list1 }"  var="food">
								<a href="shangjia.do?shopId=${food.id}" class="con_product">
									<div class="gediao_img">
										<img src="${food.img[0]}" style="height:210px"/>
									</div>
							
									<div class="info_item">
									
										<p class="name" >${food.shopName}</p>	
										<div>
											<span class="price"> <span class="symbol">¥</span> <span
												class="new_price">10</span>
											</span> <span class="old_price">门市价¥100</span> <span class="location">天心区</span>
										</div>
									
									</div>
								</a>
							</c:forEach>
								<!-- <a href="" class="con_product">
									<div class="gediao_img">
										<img src="./img/_noimg.png" />
									</div>
							
									<div class="info_item">
									
										<p class="name" >禾绿回转寿司（中海环宇城店）</p>	
										<div>
											<span class="price"> <span class="symbol">¥</span> <span
												class="new_price">10</span>
											</span> <span class="old_price">门市价¥100</span> <span class="location">天心区</span>
										</div>
									
									</div>
								</a>
								<a href="" class="con_product">
									<div class="gediao_img">
										<img src="./img/q1.jpg" />
									</div>
							
									<div class="info_item">
									
										<p class="name" >禾绿回转寿司（中海环宇城店）</p>	
										<div>
											<span class="price"> <span class="symbol">¥</span> <span
												class="new_price">10</span>
											</span> <span class="old_price">门市价¥100</span> <span class="location">天心区</span>
										</div>
									
									</div>
								</a>
								<a href="" class="con_product">
									<div class="gediao_img">
										<img src="./img/q1.jpg" />
									</div>
							
									<div class="info_item">
									
										<p class="name" >禾绿回转寿司（中海环宇城店）</p>	
										<div>
											<span class="price"> <span class="symbol">¥</span> <span
												class="new_price">10</span>
											</span> <span class="old_price">门市价¥100</span> <span class="location">天心区</span>
										</div>
									
									</div>
								</a>								
								<a href="" class="con_product">
									<div class="gediao_img">
										<img src="./img/q1.jpg" />
									</div>							
									<div class="info_item">									
										<p class="name" >禾绿回转寿司（中海环宇城店）</p>	
										<div>
											<span class="price"> <span class="symbol">¥</span> <span
												class="new_price">10</span>
											</span> <span class="old_price">门市价¥100</span> <span class="location">天心区</span>
										</div>
									</div>
								</a> -->								 
							</div>
						</div>
					
					</div>
				</div>				
		<!--页脚部分-->
		
		<!--页脚部分结束-->
		</div>
	
			<div class="footer_con">
				<%@ include file="../footer.jsp" %>
			</div>
		
	</body>

</html>
